@import 'colors';
@import 'constants';
@import 'mixins';

* {margin:0;padding:0}
body {
    background: $blue;
    color:      white;
    font:       12px Arial;
    padding:    $padding;
    text-align: center;

    h1 {
        font:bolder 24px Cambria, "Times New Roman";
        margin-bottom:2*$padding;
        color:$orange;
    }
    h2 {
        font:bolder 18px Cambria, "Times New Roman";
        margin-bottom:$padding;
        color:$blue
    }
    p {
        margin-bottom:$padding;
    }
    a {
        color:$blue;
        text-decoration: underline;
        outline:none
    }
    a:hover {
        text-decoration: none
    }

    #container {
        width: $container-width;
        margin:20px auto;
        text-align: left;
        background: white;
        color:black;
        @include box-shadow(0, 0, 4px, black);

        header {
            padding:$padding;
            float:left;
            width:$container-width - 2*$padding;

            #search-form {
                float:right;
                position:relative;
                text-align:right;

                input {
                    font-size:11px;
                }

                input[type=text] {
                    width:100px - 2*$padding2;
                    padding:$padding2 6*$padding2 $padding2 $padding2;
                    border:1px solid $grey-light;
                    background:#fff url(../img/search.png) no-repeat 98% center;
                    @include transition(width, 0.5s)
                }
                input[type=text]:focus, input[type=text].search {
                    width:300px;
                    border-color:$orange;
                    background-image:url(../img/search-hover.png);
                }
                input[type=text].loading {
                    background-image:url(../img/loading.gif);
                }

                ul.results {
                    width:100%;
                    position:absolute;
                    z-index: 999;
                    margin-left:1px;
                    list-style:none;
                    background:white;
                    text-align: left;
                    @include box-shadow(0, 0, $padding2, black);

                    li {
                        border-bottom:1px dotted $grey-light;
                        height: 36px + 4*$padding2;
                        line-height:36px;
                        overflow:hidden;

                        a {
                            display:block;
                            padding:$padding2;
                            text-decoration: none;
                            color:$grey;
                            background:white;
                            border:$padding2 solid transparent
                        }
                        a:hover {
                            border-color:$orange;
                            color:$orange
                        }
                    }
                    li:last-child, li:nth-last-child(2) {border:none}
                    li.more {
                        text-align: center;
                        font-weight:bolder;
                        line-height: inherit;
                        height:auto;
                        position:absolute;
                        right:0;
                        z-index: -1;
                        @include box-shadow(0, 0, $padding2, black);

                        a {
                            background:$grey;
                            color:white
                        }
                        a:hover {
                            background:$orange;
                            color:white;
                            border-color:transparent
                        }
                    }
                }
            }
        }

        menu {
            list-style:none;
            text-align: center;
            background:$grey-light;
            clear:both;
            width:100%;

            li {
                display:inline-block;

                a, strong {
                    display:block;
                    padding:$padding
                }
                a {
                    text-decoration:none;
                    color:$grey;
                }
                a:hover {
                    color:black;
                }
                strong {
                    background:white;
                    font-weight:normal;
                }
            }
        }

        #content {
            padding:$padding;

            ul {
                padding-left:20px;
            }

            .item-list {
                list-style:none;
                float:left;
                width:$container-width - 2*$padding;
                padding:0;

                li {
                    float:left;
                    width:($container-width - 6*$padding)/3;
                    height:100px;
                    position:relative;
                    margin:0 2*$padding 2*$padding 0;
                    overflow:hidden;
                    text-align: center;

                    h1 {
                        margin:0;
                        font-size:16px;
                        a {
                            text-decoration: none;
                            color:$orange;

                            span {
                                color:$grey;
                                display:block;
                                font-size:0.6em
                            }
                        }
                    }
                }
                li:nth-child(3n) {margin-right:0}
            }

            .pagination {
                clear:both;
                text-align: center;
                margin-top:$padding;
                padding-top:$padding2;
                border-top:1px dotted $grey;
                color:$grey;

                ul {
                    list-style:none;
                    padding:0;
                    margin-top:$padding2;

                    li {
                        display:inline-block;
                        width:16px;
                        height:16px;
                        line-height: 16px;
                        font-size:11px;
                        overflow:hidden;
                    }
                    strong, a{
                        display:block;
                        text-decoration:none;
                        color:$blue;
                        font-weight: normal;
                        @include border-radius-all(8px)
                    }
                    strong {
                        background:$blue;
                        color:white
                    }
                    a:hover {
                        background:$grey;
                        color:white
                    }
                }
            }

            .model-table {
                float:left;
                p {
                    float:left;
                    clear:both;

                    strong {
                        display:block;
                        float:left;
                        text-align: right;
                        width:100px;
                    }

                    .sub {
                        float:left;
                        margin-left:$padding;

                        strong {
                            color:$grey;
                            width:70px;
                            clear:both;
                            text-align:left;
                        }
                        span {
                            float:left;
                            display:block
                        }
                        .unit {
                            float:none;
                            display:inline-block;
                            color:$grey;
                            font-size:0.9em;
                            margin-left:$padding2
                        }
                    }
                }
            }
        }
    }
}